<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css阴影</title>
    <script src="https://fengyuanchen.github.io/viewerjs/css/viewer.css"></script>
    <script src="https://fengyuanchen.github.io/viewerjs/css/viewer.css"></script>
</head>

<body>

        <div id="box" class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>

        <div id="tooltip" role="tooltip">I'm a tooltip</div>
</body>

</html>

<script>
    const box = document.querySelectorAll('.item');
    const tooltip = document.querySelector('#tooltip');
  

    changePosition(2, 'bottom')

    function changePosition(index, pos){
        Popper.createPopper(box[index], tooltip, {
            placement: pos,
        });
        const a = 
    }
  </script>